<!DOCTYPE html>
<html xml:lang="zh-CN" lang="zh-CN">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta http-equiv="Content-Language" content="zh-cn" />
		<title>why?</title>
		<meta name="robots" content="index, follow" />
		<meta name="googlebot" content="index, follow" />
		<style type="text/css" media="screen">
			< !-- * {
				margin: 0;
				padding: 0;
			}

			body {
				margin: 0 auto;
				font: 12px/20px tahoma Simsun Arial;
				color: #fff;
				background-color: #FFF;
				text-align: center;
			}

			.aaa {
				width: 150px;
				background: Blue;
				position: absolute;
				left: 0;
				top: 0;
			}

			.bbb {
				width: 150px;
				background: Blue;
				position: absolute;
				right: 0;
				top: 0;
			}

			.ccc {
				width: 150px;
				position: absolute;
				top: 100%;
				left: 0;
				margin-top: -20px;
				background: Blue;
			}

			.ddd {
				width: 150px;
				position: absolute;
				top: 100%;
				right: 0;
				margin-top: -20px;
				background: Blue;
			}

			.aa {
				width: 50px;
				position: fixed;
				background: Black;
				_position: absolute;
				_top: expression(eval(document.documentElement.scrollTop));
				z-index: 1000;
				left: 0;
				top: 0;
			}

			.bb {
				width: 50px;
				position: fixed;
				background: Black;
				_position: absolute;
				_top: expression(eval(document.documentElement.scrollTop));
				z-index: 1000;
				right: 0;
				top: 0;
			}

			.a {
				color: #000;
			}

			-->
		</style>
	</head>
	<body>
		<div class="aaa">AAA</div>
		<div class="bbb">BBB</div>
		<div class="aa">A</div>
		<div class="bb">B</div>
		<div class="a">
			<br />
			<br />
			<br />
			<br />
			<br />
			A层和B层会随滚动条移动永久置顶
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
		</div>
		<div class="ccc">CCC</div>
		<div class="ddd">DDD</div>
	</body>
</html>
